[V0_FILE]typescriptreact:file="components/control-panel.tsx" isEdit="true" isMerged="true" "use client" import { Card } from "@/components/ui/card" import { Label } from "@/components/ui/label" import { Slider } from "@/components/ui/slider" import { Button } from "@/components/ui/button" import { Switch } from "@/components/ui/switch" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { usePerlinStore } from "@/hooks/use-perlin-store" import { Shuffle, RotateCcw, Settings } from "lucide-react" import { useState } from "react" export function ControlPanel() { const [isExpanded, setIsExpanded] = useState(true) const { octaves, frequency, amplitude, persistence, lacunarity, seed, resolution, size, // Added size from store colorScheme, wireframe, autoRotate, setOctaves, setFrequency, setAmplitude, setPersistence, setLacunarity, setSeed, setResolution, setSize, // Added size setter setColorScheme, setWireframe, setAutoRotate, randomizeSeed, resetToDefaults, } = usePerlinStore() return (

Terrain Controls

{isExpanded && (

{/* Quick Actions */}

{/* Terrain Parameters */}

Size: {size}

Overall terrain area (width × height)

setSize(value)} min={50} max={500} step={10} className="w-full" />

Octaves: {octaves}

Number of noise layers (detail levels)

setOctaves(value)} min={1} max={8} step={1} className="w-full" />

Frequency: {frequency.toFixed(3)}

Scale of terrain features (higher = smaller features)

setFrequency(value)} min={0.001} max={0.1} step={0.001} className="w-full" />

Amplitude: {amplitude.toFixed(1)}

Maximum height of terrain

setAmplitude(value)} min={1} max={50} step={0.5} className="w-full" />

Persistence: {persistence.toFixed(2)}

How much each octave contributes (roughness)

setPersistence(value)} min={0.1} max={1.0} step={0.01} className="w-full" />

Lacunarity: {lacunarity.toFixed(1)}

Frequency multiplier between octaves

setLacunarity(value)} min={1.5} max={4.0} step={0.1} className="w-full" />

Seed: {seed}

Random seed for reproducible terrain

setSeed(value)} min={0} max={9999} step={1} className="w-full" />

Resolution: {resolution}×{resolution}

Mesh detail (higher = more polygons)

setResolution(value)} min={32} max={256} step={16} className="w-full" />

{/* Visual Options */}

Color Scheme

Wireframe Mode

Auto Rotate

)}

) } [V0_FILE]typescriptreact:file="hooks/use-perlin-store.ts" isEdit="true" isMerged="true" "use client" import { create } from "zustand" interface PerlinState { // Noise parameters octaves: number frequency: number amplitude: number persistence: number lacunarity: number seed: number // Visual parameters resolution: number size: number // Added size parameter for terrain area colorScheme: string wireframe: boolean autoRotate: boolean // Actions setOctaves: (octaves: number) => void setFrequency: (frequency: number) => void setAmplitude: (amplitude: number) => void setPersistence: (persistence: number) => void setLacunarity: (lacunarity: number) => void setSeed: (seed: number) => void setResolution: (resolution: number) => void setSize: (size: number) => void // Added size setter setColorScheme: (scheme: string) => void setWireframe: (wireframe: boolean) => void setAutoRotate: (autoRotate: boolean) => void randomizeSeed: () => void resetToDefaults: () => void } const defaultValues = { octaves: 4, frequency: 0.02, amplitude: 15, persistence: 0.5, lacunarity: 2.0, seed: 1337, resolution: 128, size: 100, // Added default size colorScheme: "terrain", wireframe: false, autoRotate: false, } export const usePerlinStore = create((set) => ({ ...defaultValues, setOctaves: (octaves) => set({ octaves }), setFrequency: (frequency) => set({ frequency }), setAmplitude: (amplitude) => set({ amplitude }), setPersistence: (persistence) => set({ persistence }), setLacunarity: (lacunarity) => set({ lacunarity }), setSeed: (seed) => set({ seed }), setResolution: (resolution) => set({ resolution }), setSize: (size) => set({ size }), // Added size setter implementation setColorScheme: (colorScheme) => set({ colorScheme }), setWireframe: (wireframe) => set({ wireframe }), setAutoRotate: (autoRotate) => set({ autoRotate }), randomizeSeed: () => set({ seed: Math.floor(Math.random() * 10000) }), resetToDefaults: () => set(defaultValues), })) [V0_FILE]typescriptreact:file="lib/improved-noise.ts" isMerged="true" /** * Improved Perlin Noise Implementation * Based on Ken Perlin's 2002 improved noise algorithm * Reference: https://mrl.cs.nyu.edu/~perlin/noise/ */ export class ImprovedNoise { private p: number[] = [] constructor(seed = 0) { this.setSeed(seed) } setSeed(seed: number) { // Initialize permutation table with seed const random = this.seededRandom(seed) const permutation: number[] = [] // Fill with values 0-255 for (let i = 0; i < 256; i++) { permutation[i] = i } // Shuffle using Fisher-Yates with seeded random for (let i = 255; i > 0; i--) { const j = Math.floor(random() * (i + 1)) ;[permutation[i], permutation[j]] = [permutation[j], permutation[i]] } // Duplicate for easy wrapping this.p = [...permutation, ...permutation] } private seededRandom(seed: number) { let x = Math.sin(seed) * 10000 return () => { x = Math.sin(x) * 10000 return x - Math.floor(x) } } // Improved fade function: 6t^5 - 15t^4 + 10t^3 private fade(t: number): number { return t * t * t * (t * (t * 6 - 15) + 10) } // Linear interpolation private lerp(t: number, a: number, b: number): number { return a + t * (b - a) } // Gradient function using improved 12 gradient vectors private grad(hash: number, x: number, y: number, z: number): number { const h = hash & 15 const u = h < 8 ? x : y const v = h < 4 ? y : h === 12 || h === 14 ? x : z return ((h & 1) === 0 ? u : -u) + ((h & 2) === 0 ? v : -v) } noise(x: number, y: number, z: number): number { // Find unit cube that contains point const X = Math.floor(x) & 255 const Y = Math.floor(y) & 255 const Z = Math.floor(z) & 255 // Find relative x,y,z of point in cube x -= Math.floor(x) y -= Math.floor(y) z -= Math.floor(z) // Compute fade curves for each of x,y,z const u = this.fade(x) const v = this.fade(y) const w = this.fade(z) // Hash coordinates of the 8 cube corners const A = this.p[X] + Y const AA = this.p[A] + Z const AB = this.p[A + 1] + Z const B = this.p[X + 1] + Y const BA = this.p[B] + Z const BB = this.p[B + 1] + Z // Add blended results from 8 corners of cube return this.lerp( w, this.lerp( v, this.lerp(u, this.grad(this.p[AA], x, y, z), this.grad(this.p[BA], x - 1, y, z)), this.lerp(u, this.grad(this.p[AB], x, y - 1, z), this.grad(this.p[BB], x - 1, y - 1, z)), ), this.lerp( v, this.lerp(u, this.grad(this.p[AA + 1], x, y, z - 1), this.grad(this.p[BA + 1], x - 1, y, z - 1)), this.lerp(u, this.grad(this.p[AB + 1], x, y - 1, z - 1), this.grad(this.p[BB + 1], x - 1, y - 1, z - 1)), ), ) } } [V0_FILE]typescriptreact:file="components/ui/label.tsx" isMerged="true" "use client" import * as React from "react" import * as LabelPrimitive from "@radix-ui/react-label" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const labelVariants = cva("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70") const Label = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & VariantProps >(({ className, ...props }, ref) => ( )) Label.displayName = LabelPrimitive.Root.displayName export { Label } [V0_FILE]typescriptreact:file="components/ui/slider.tsx" isMerged="true" "use client" import * as React from "react" import * as SliderPrimitive from "@radix-ui/react-slider" import { cn } from "@/lib/utils" const Slider = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) Slider.displayName = SliderPrimitive.Root.displayName export { Slider } [V0_FILE]typescriptreact:file="components/ui/switch.tsx" isMerged="true" "use client" import * as React from "react" import * as SwitchPrimitives from "@radix-ui/react-switch" import { cn } from "@/lib/utils" const Switch = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) Switch.displayName = SwitchPrimitives.Root.displayName export { Switch } [V0_FILE]typescriptreact:file="components/ui/select.tsx" isMerged="true" "use client" import * as React from "react" import * as SelectPrimitive from "@radix-ui/react-select" import { Check, ChevronDown, ChevronUp } from "lucide-react" import { cn } from "@/lib/utils" const Select = SelectPrimitive.Root const SelectGroup = SelectPrimitive.Group const SelectValue = SelectPrimitive.Value const SelectTrigger = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( span]:line-clamp-1", className, )} {...props} > {children} )) SelectTrigger.displayName = SelectPrimitive.Trigger.displayName const SelectScrollUpButton = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName const SelectScrollDownButton = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName const SelectContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, position = "popper", ...props }, ref) => ( {children} )) SelectContent.displayName = SelectPrimitive.Content.displayName const SelectLabel = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SelectLabel.displayName = SelectPrimitive.Label.displayName const SelectItem = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( {children} )) SelectItem.displayName = SelectPrimitive.Item.displayName const SelectSeparator = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SelectSeparator.displayName = SelectPrimitive.Separator.displayName export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton, } [V0_FILE]typescriptreact:file="components/terrain-mesh.tsx" isEdit="true" isMerged="true" "use client" import { useRef, useMemo } from "react" import * as THREE from "three" import { ImprovedNoise } from "@/lib/improved-noise" interface TerrainMeshProps { octaves: number frequency: number amplitude: number persistence: number lacunarity: number seed: number resolution: number size: number // Added size prop colorScheme: string wireframe: boolean } export function TerrainMesh({ octaves, frequency, amplitude, persistence, lacunarity, seed, resolution, size, // Added size parameter colorScheme, wireframe, }: TerrainMeshProps) { const meshRef = useRef(null) const noise = useMemo(() => new ImprovedNoise(seed), [seed]) // Generate terrain geometry const geometry = useMemo(() => { const geo = new THREE.PlaneGeometry(size, size, resolution, resolution) const positions = geo.attributes.position.array as Float32Array const colors = new Float32Array(positions.length) const colorSchemes = { terrain: [ { height: -1, color: new THREE.Color(0x1e40af) }, // Deep blue (water) { height: -0.3, color: new THREE.Color(0x3b82f6) }, // Blue (shallow water) { height: 0, color: new THREE.Color(0xfbbf24) }, // Yellow (beach) { height: 0.3, color: new THREE.Color(0x22c55e) }, // Green (grass) { height: 0.6, color: new THREE.Color(0x16a34a) }, // Dark green (forest) { height: 0.8, color: new THREE.Color(0x78716c) }, // Gray (rock) { height: 1, color: new THREE.Color(0xf8fafc) }, // White (snow) ], volcanic: [ { height: -1, color: new THREE.Color(0x7c2d12) }, // Dark red { height: -0.2, color: new THREE.Color(0xdc2626) }, // Red { height: 0.2, color: new THREE.Color(0xf97316) }, // Orange { height: 0.5, color: new THREE.Color(0xfbbf24) }, // Yellow { height: 0.8, color: new THREE.Color(0x525252) }, // Gray { height: 1, color: new THREE.Color(0xfecaca) }, // Light red ], arctic: [ { height: -1, color: new THREE.Color(0x1e3a8a) }, // Dark blue { height: -0.1, color: new THREE.Color(0x3b82f6) }, // Blue { height: 0.1, color: new THREE.Color(0x93c5fd) }, // Light blue { height: 0.4, color: new THREE.Color(0xe2e8f0) }, // Light gray { height: 0.7, color: new THREE.Color(0xf1f5f9) }, // Very light gray { height: 1, color: new THREE.Color(0xffffff) }, // White ], desert: [ { height: -1, color: new THREE.Color(0x92400e) }, // Dark brown { height: -0.2, color: new THREE.Color(0xd97706) }, // Orange brown { height: 0.1, color: new THREE.Color(0xfbbf24) }, // Yellow { height: 0.4, color: new THREE.Color(0xfde047) }, // Light yellow { height: 0.7, color: new THREE.Color(0xfef3c7) }, // Very light yellow { height: 1, color: new THREE.Color(0xfffbeb) }, // Cream ], } const currentScheme = colorSchemes[colorScheme as keyof typeof colorSchemes] || colorSchemes.terrain let minHeight = Number.POSITIVE_INFINITY let maxHeight = Number.NEGATIVE_INFINITY const heights: number[] = [] for (let i = 0; i < positions.length; i += 3) { const x = positions[i] const y = positions[i + 1] let height = 0 let currentAmplitude = amplitude let currentFrequency = frequency for (let octave = 0; octave < octaves; octave++) { const sampleX = x * currentFrequency * (100 / size) * 0.02 const sampleY = y * currentFrequency * (100 / size) * 0.02 height += noise.noise(sampleX, sampleY, 0) * currentAmplitude currentAmplitude *= persistence currentFrequency *= lacunarity } height *= 15 // Multiply by 15 for more dramatic terrain heights.push(height) minHeight = Math.min(minHeight, height) maxHeight = Math.max(maxHeight, height) } for (let i = 0; i < positions.length; i += 3) { const heightIndex = Math.floor(i / 3) const height = heights[heightIndex] // Apply height to z-coordinate positions[i + 2] = height const normalizedHeight = maxHeight !== minHeight ? ((height - minHeight) / (maxHeight - minHeight)) * 2 - 1 // Map to [-1, 1] : 0 // Find appropriate color based on height let color = currentScheme[0].color for (let j = 1; j < currentScheme.length; j++) { if (normalizedHeight <= currentScheme[j].height) { const prev = currentScheme[j - 1] const curr = currentScheme[j] const t = Math.max(0, Math.min(1, (normalizedHeight - prev.height) / (curr.height - prev.height))) color = prev.color.clone().lerp(curr.color, t) break } } colors[i] = color.r colors[i + 1] = color.g colors[i + 2] = color.b } geo.setAttribute("color", new THREE.BufferAttribute(colors, 3)) geo.computeVertexNormals() return geo }, [octaves, frequency, amplitude, persistence, lacunarity, seed, resolution, size, colorScheme, noise]) // Added size to dependencies return ( ) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" "use client" import { Canvas } from "@react-three/fiber" import { OrbitControls, Environment } from "@react-three/drei" import { Suspense } from "react" import { TerrainMesh } from "@/components/terrain-mesh" import { ControlPanel } from "@/components/control-panel" import { usePerlinStore } from "@/hooks/use-perlin-store" export default function PerlinPlayground() { const { octaves, frequency, amplitude, persistence, lacunarity, seed, resolution, size, // Added size parameter from store colorScheme, wireframe, autoRotate, } = usePerlinStore() return (

{/* 3D Scene */}

{/* Control Panel */} {/* Info Panel */}

Perlin Noise Playground

Interactive 3D terrain generation using Ken Perlin's improved noise algorithm

• Drag to rotate • Scroll to zoom

• Use controls to modify terrain

• Octaves: {octaves} | Frequency: {frequency.toFixed(3)} | Size: {size} // Added size to info display

) }

About

Tags

Share

About

Tags

Share

More from sahaj-jj

More Templates Like This

About

Tags

Share

About

Tags

Share

More from sahaj-jj

More Templates Like This